<template>
    <div class="layout">
        <section class="content">
            <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
                <div class="el-col el-col-8" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-blue-light">Light Blue
                        <div class="value">#58B7FF</div>
                    </div>
                </div>
                <div class="el-col el-col-8" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-blue">Blue
                        <div class="value">#20A0FF</div>
                    </div>
                </div>
                <div class="el-col el-col-8" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-blue-dark">Dark Blue
                        <div class="value">#1D8CE0</div>
                    </div>
                </div>
            </div>

            <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-info">Blue
                        <div class="value">#20A0FF</div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-success">Success
                        <div class="value">#13CE66</div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-warning">Warning
                        <div class="value">#F7BA2A</div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box bg-danger">Danger
                        <div class="value">#FF4949</div>
                    </div>
                </div>
            </div>


            <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box-group">
                        <div class="demo-color-box bg-black">Black
                            <div class="value">#1F2D3D</div>
                        </div>
                        <div class="demo-color-box bg-black-light">Light Black
                            <div class="value">#324057</div>
                        </div>
                        <div class="demo-color-box bg-black-lighter">Extra Light Black
                            <div class="value">#475669</div>
                        </div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box-group">
                        <div class="demo-color-box bg-silver">Silver
                            <div class="value">#8492A6</div>
                        </div>
                        <div class="demo-color-box bg-silver-light">Light Silver
                            <div class="value">#99A9BF</div>
                        </div>
                        <div class="demo-color-box bg-silver-lighter">Extra Light Silver
                            <div class="value">#C0CCDA</div>
                        </div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box-group">
                        <div class="demo-color-box color-gray bg-gray">Gray
                            <div class="value">#D3DCE6</div>
                        </div>
                        <div class="demo-color-box color-gray bg-gray-light">Light Gray
                            <div class="value">#E5E9F2</div>
                        </div>
                        <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray
                            <div class="value">#EFF2F7</div>
                        </div>
                    </div>
                </div>
                <div class="el-col el-col-6" style="padding-left: 6px; padding-right: 6px;">
                    <div class="demo-color-box-group" style="border: 1px solid rgb(224, 230, 237); border-radius: 4px;">
                        <div class="demo-color-box color-gray bg-white-dark">Dark White
                            <div class="value">#F9FAFC</div>
                        </div>
                        <div class="demo-color-box color-gray bg-white">White
                            <div class="value">#FFFFFF</div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
</template>
<style>
    .bg-blue-light {
        background-color: #58b7ff;
    }

    .demo-color-box {
        border-radius: 4px;
        padding: 20px;
        height: 74px;
        box-sizing: border-box;
        color: #fff;
        font-size: 14px;
    }

    .bg-blue, .bg-info {
        background-color: #20a0ff;
    }

    .bg-blue-dark {
        background-color: #1d8ce0;
    }

    .bg-success {
        background-color: #13ce66;
    }

    .bg-warning {
        background-color: #f7ba2a;
    }

    .bg-danger {
        background-color: #ff4949;
    }

    .bg-black {
        background-color: #1f2d3d;
    }

    .bg-black-light {
        background-color: #324057;
    }

    .bg-gray {
        background-color: #d3dce6;
    }

    .bg-white-dark {
        background-color: #f9fafc;
    }

    .color-gray {
        color: #5e6d82;
    }

    .bg-gray-lighter {
        background-color: #eff2f7;
    }

    .bg-silver {
        background-color: #8492a6;
    }

    .bg-silver-light {
        background-color: #99a9bf;
    }

    .bg-silver-lighter {
        background-color: #c0ccda;
    }

    .bg-gray-light {
        background-color: #e5e9f2;
    }

    .bg-black-lighter {
        background-color: #475669;
    }

</style>
<script>
    export default {
        data () {
            return {
                msg: 'Hello vue'
            }
        }
    }
</script>
